<template>
    <main-layout>
        <!-- 搜索部分 -->
        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <div class="Tec">
            <div class="TecInfo" v-for="item in technicianList" :key="item.id" @click="toTechnicianDetailEvt(item.id)">
                <img :src="item.imageurl" />
                <div class="Techname">
                    <span>{{item.techname}}</span>
                </div>
                <div class="Techexplain">
                    <span>{{item.techexplain}}</span>
                </div>
            </div>

            <!-- 加载部分 -->
            <div class="toLoading">
                <div class="loading" v-if="loadingMore" @click="toMore">加载更多</div>
                <div class="loading" v-else-if="isShow">没有更多数据</div>
                <div class="loading" v-else>加载中...</div>
            </div>
        </div>
    </main-layout>
</template>

<script>
    import { getTechnicianApi } from '../../axios/technician'
    export default {
        data() {
            return {
                //搜索
                value:'',
                //技师分页数据
                technicianList:[],
                technicianObj:{
                    page:1,
                    size:4
                },
                //加载
                loadingMore:true,
                isShow:false
            }
        },

        created() {
            //调用技师接口方法
            this.getTechnician()
        },

        methods: {
            //获取技师数据方法
            async getTechnician(){
                let technicianResult=await getTechnicianApi(this.technicianObj)
                if(technicianResult.code==0){
                    for(let i=0;i<technicianResult.data.length;i++){
                        technicianResult.data[i].imageurl='http://120.79.136.98/Hairdressing/images/'+technicianResult.data[i].imageurl
                    }
                    this.technicianList=[...this.technicianList,...technicianResult.data]
                }
                if(this.technicianList.length>=technicianResult.count){
                    this.isShow=true
                    this.loadingMore=false
                    return
                }
                setTimeout(() => {
                    this.loadingMore=true
                });
            },

            //加载更多事件
            toMore(){
                if (this.loadingMore) {
                    this.loadingMore = false
                    this.technicianObj.page ++
                    this.getTechnician()
                }
            },

            //前往技师详情页面
            toTechnicianDetailEvt(id){
                this.$router.push('/technicianDetail?id='+id)
            }
        },
    }
</script>

<style lang="less" scoped>
    .Tec{
        width: 100%;
        overflow-x: scroll;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .TecInfo{
            width: 45%;
            border: 2px solid #a1a1a1;
            box-shadow: 3px 3px 3px #a1a1a1;
            margin-bottom: 10px;
            > img{
                width: 100%;
                height: 200px;
            }
            .Techname{
                font-weight: bold;
                padding-bottom: 18px;
                letter-spacing: 1px;
                > span{
                    color: #111;
                }
            }
            .Techexplain{
                font-size: 14px;
                padding-bottom: 15px;
                > span{
                    color: #999;
                    font-size: 14px;
                }
            }
        }
        //加载部分
        > .toLoading{
            padding: 5px 0;
            > .loading{
                color: #c9c9c9;
                text-align: center;
                letter-spacing: 1px;
            }
        }
    }
</style>